<template>
	<view>
		<uni-nav-bar shadow left-icon="left" title="建群" @clickLeft="back" />
		<view class="">
			<view class="groupimg">
				<view class="groupimgposition">
					<image :src="pathlistimg.length == 0? `${baseurl}/uploads/20240214/file-1707845227548.jpg`:pathlistimg[0]" mode="" class="groupimgedit" @tap="showeditimg(pathlistimg[0])"></image>
					<image class="editgroupimg" src="../../static/img/groupedit.png" mode="" @tap="editandselectimg"></image>
				</view>
				
			</view>
			<view class="groupeditname">
				<uni-easyinput class="uni-mt-5" trim="all" v-model="groupname" placeholder="取个名吧" ></uni-easyinput>
			</view>
			<view class="friendlisttitle">
				用户列表
			</view>
			<scroll-view scroll-y="true" class="scrollviewheight">
				<view>
					<view class="scrolllistitem" v-for="(item,index) in friendlist" :key="item.id" @tap="clickselect(index)">
						<view class="selectorno">
							
							<image v-show="item.ischecked" class="selectornoimg" src="@/static/img/right.png" mode=""></image>
						</view>
						<view class="friendimgview">
							<image class="friendimg" :src="`${baseurl}/${item.imgUrl}`" mode=""></image>
						</view>
						<view class="nicknameline">
							{{item.nickname}}
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="creategroup">
				<button  @tap="gogroupdetail">创建</button>
			</view>
		</view>
	</view>
	
</template>

<script>
	import {mapState} from 'vuex'
	import $http from '@/common/api/request.js'
	export default {
		data() {
			return {
				baseurl:"https://zyc618.mynatapp.cc",
				pathlistimg:[],//装图片的变量
				pathselectimg:"/uploads/20240214/file-1707845227548.jpg",//最终上传的应该是服务器的字符串
				groupname:"",//群的名字
				friendlist:[],
				friendarr:[]
			};
		},
		methods:{
			//点击返回的回调函数:
			back(){
				this.navigateTo({
					url:"/pages/index/index"
				})
			},
			//是否勾选列表
			clickselect(index){
				this.friendlist[index].ischecked = !this.friendlist[index].ischecked 
			},
			//编辑群图片:
			editandselectimg(){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album',"camera"], 
					success: (res)=> {
						this.pathlistimg = res.tempFilePaths;
						
						//上传服务器函数:
						this.submitimg(this.pathlistimg[0])
					}
				});
			},
			showeditimg(imgurl){
				uni.previewImage({
					urls:imgurl,
				});
			},
			//点击创建,发送请求:
			gogroupdetail(){
				
				this.submitrequest()
			},
			//图片上传服务器:
			submitimg(pathfile){
				uni.uploadFile({
					url: this.baseurl+'/api/files/upload', //仅为示例，非真实的接口地址
					filePath:pathfile,
					name: 'file',
					formData: {
						url: "Group",
						pathname:this.userInfo.id + Date.now()
					},
					success: (uploadFileRes) => {
						let imgdatalist =JSON.parse(uploadFileRes.data);
						
						if(imgdatalist.data.code == 200){
							//获取后端处理图片地址信息,完成信息修改
							
							this.pathselectimg = imgdatalist.data.url//存放qun头像的地址信息
						}
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			//发送请求函数回调:
			submitrequest(){
				this.getselectfriendall()
				$http.request({
					url: "/index/creategroupid",
					method: "POST",
					data: {
						userID:this.userInfo.id,
						name:this.groupname,
						imgurl:`${this.pathselectimg==""? '/uploads/20240214/file-1707845227548.jpg':this.pathselectimg}`,
						userIDlist:JSON.stringify(this.friendarr)
					}
				}).then((res) => {
					if(res.code ==200){
						uni.showToast({
							title:`${res.data.msg}`,
							icon:"none",
							duration:1500,
							mask:true
						})
						this.$nextTick(()=>{
							uni.navigateTo({
								url:`/pages/groupmsgdetail/groupmsgdetail?groupid=${res.data.groupid}&pathselectimg=${this.pathselectimg}`
							})
						})
						
					}else{
						uni.showToast({
							title:"创建失败",
							icon:"none",
							duration:1500,
							mask:true
						})
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			getselectfriendall(){
				this.friendarr = []
				this.friendlist.forEach(obj => {
				  if(obj.ischecked === true){
					  this.friendarr.push(obj.id)
				  }
				});
			}
		},
		onLoad(e) {
			this.friendlist = JSON.parse(e.friendlist).map(obj => {
			  return { ...obj, ischecked: false };
			});
		},
		//计算属性:
		computed:{
		  ...mapState({
			  userInfo: state => state.user.userInfo
		  }),
		}
	}
</script>

<style lang="scss">
.groupimg{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 300rpx;
	.groupimgposition{
		position: relative;
		.groupimgedit{
		width: 180rpx;
		height: 180rpx;
		
	}
	.editgroupimg{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		width: 40rpx;
		height: 40rpx;
		z-index: 1000;
		background-color: #fff;
		opacity: 0.8;
		border-radius: $uni-border-radius-circle;
	}
	}

}

.friendlisttitle{
	font-size: 36rpx;
	font-weight: 600;
	padding: 10rpx 20rpx;
}
.groupeditname{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0rpx 50rpx;
}
.scrollviewheight{
	height: 60vh;
}
.scrolllistitem{
	display: flex;
	align-items: center;
	padding: 10rpx 20rpx;
	.selectorno{
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #1a9c34;
		opacity: 0.8;
		border-radius: $uni-border-radius-circle;
		width: 50rpx;
		height: 50rpx;
		border: 1rpx solid #fee225;
		margin-right: 20rpx;
		.selectornoimg{
			width: 40rpx;
			height: 40rpx;
		}
	}
	.friendimgview{
		border-radius: 10rpx;
		overflow: hidden;
		.friendimg{
			width: 80rpx;
			height: 80rpx;
		}
	}

	.nicknameline{
		margin-left: 20rpx;
		display: -webkit-box;
		width: 60%;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
}
.creategroup{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}
</style>
